import React, { Component } from 'react';
import { StyleSheet, ScrollView } from 'react-native';
import {
  Marquee,
  MarqueeDirections,
  Text,
  View,
  Spacings,
} from 'react-native-ui-lib';
import {
  renderBooleanOption,
  renderMultipleSegmentOptions,
} from '../ExampleScreenPresenter';
import { TestCase, TestSuite } from '@rnoh/testerino';

export default class MarqueeScreen extends Component<{}> {
  state = {
    duration: 5000,
    directionHorizontal: true,
    directionVertical: true,
    numOfReps: -1,
  };

  renderHorizontalSection = () => {
    const { directionHorizontal, numOfReps, duration } = this.state;
    return (
      <View marginV-s3 center>
        <Text h2 marginB-s2 $textDefault>
          Horizontal
        </Text>
        <Text h3 marginV-s2 $textDefault>
          Marquee:{' '}
          {directionHorizontal
            ? MarqueeDirections.LEFT
            : MarqueeDirections.RIGHT}
        </Text>
        <Marquee
          key={`${directionHorizontal}-${duration}-${numOfReps}`}
          label={'Hey there, this is the new Marquee component from UILIB!'}
          direction={
            directionHorizontal
              ? MarqueeDirections.LEFT
              : MarqueeDirections.RIGHT
          }
          duration={duration}
          numberOfReps={numOfReps}
          containerStyle={[styles.containerHorizontal, styles.horizontal]}
        />
      </View>
    );
  };

  renderVerticalSection = () => {
    const { directionVertical, numOfReps, duration } = this.state;
    return (
      <View marginV-s3 center>
        <Text h2 marginB-s2 $textDefault>
          Vertical
        </Text>
        <Text h3 marginV-s2 $textDefault>
          Marquee:{' '}
          {directionVertical ? MarqueeDirections.UP : MarqueeDirections.DOWN}
        </Text>
        <Marquee
          label={
            'Hey there, this is the new Marquee! Hey there, this is the new Marquee! Hey there, this is the new Marquee! Hey there, this is the new Marquee!'
          }
          labelStyle={styles.label}
          key={`${directionVertical}-${duration}-${numOfReps}`}
          direction={
            directionVertical ? MarqueeDirections.UP : MarqueeDirections.DOWN
          }
          duration={duration}
          numberOfReps={numOfReps}
          containerStyle={[styles.containerHorizontal, styles.vertical]}
        />
      </View>
    );
  };

  render() {
    return (
      <TestSuite name="Marquee">
        <TestCase itShould="direction属性">
          <View column padding-3>
            <Marquee
              label={'Hey there, this is the new Marquee component from UILIB!'}
              direction={
                MarqueeDirections.LEFT
              }
              duration={5000}
              containerStyle={[styles.containerHorizontal, styles.horizontal]}
            />

            <Marquee
              label={
                'Hey there, this is the new Marquee! Hey there, this is the new Marquee! Hey there, this is the new Marquee! Hey there, this is the new Marquee!'
              }
              labelStyle={styles.label}
              direction={
                MarqueeDirections.UP
              }
              duration={5000}
              containerStyle={[styles.containerHorizontal, styles.vertical]}
            />
          </View>
        </TestCase>

        <TestCase itShould="duration属性">
          <View column padding-3>
            <Marquee
              label={'Hey there, this is the new Marquee component from UILIB!'}
              direction={
                MarqueeDirections.LEFT
              }
              duration={5000}
              containerStyle={[styles.containerHorizontal, styles.horizontal]}
            />

            <Marquee
              label={'Hey there, this is the new Marquee component from UILIB!'}
              direction={
                MarqueeDirections.LEFT
              }
              duration={10000}
              containerStyle={[styles.containerHorizontal, styles.horizontal]}
            />
          </View>
        </TestCase>

        <TestCase itShould="label属性">
          <View column padding-3>
            <Marquee
              label={'Hey there, this is the new Marquee component from UILIB!'}
              direction={
                MarqueeDirections.LEFT
              }
              duration={5000}
              containerStyle={[styles.containerHorizontal, styles.horizontal]}
            />

            <Marquee
              label={'hello world,this is other label'}
              direction={
                MarqueeDirections.LEFT
              }
              duration={5000}
              containerStyle={[styles.containerHorizontal, styles.horizontal]}
            />
          </View>
        </TestCase>

        <TestCase itShould="labelStyle属性">
          <View column padding-3>
            <Marquee
              label={'Hey there, this is the new Marquee component from UILIB!'}
              direction={
                MarqueeDirections.LEFT
              }
              duration={5000}
              containerStyle={[styles.containerHorizontal, styles.horizontal]}
              labelStyle={{ color: "red" }}
            />

            <Marquee
              label={'Hey there, this is the new Marquee component from UILIB!'}
              direction={
                MarqueeDirections.LEFT
              }
              duration={5000}
              containerStyle={[styles.containerHorizontal, styles.horizontal]}
              labelStyle={{ color: "blue" }}
            />
          </View>
        </TestCase>

        <TestCase itShould="containerStyle属性">
          <View column padding-3>

            <Marquee
              label={'Hey there, this is the new Marquee component from UILIB!'}
              direction={
                MarqueeDirections.LEFT
              }
              duration={5000}
              containerStyle={[styles.containerHorizontal, styles.horizontal]}
            />

            <Marquee
              label={'Hey there, this is the new Marquee component from UILIB!'}
              direction={
                MarqueeDirections.LEFT
              }
              duration={5000}
              containerStyle={[styles.containerHorizontal1, styles.horizontal]}
            />


          </View>
        </TestCase>

        <TestCase itShould="numberOfReps属性,第一个循环5次，第二个无限循环">
          <View column padding-3>
            <Marquee
              label={'Hey there, this is the new Marquee component from UILIB!'}
              direction={
                MarqueeDirections.LEFT
              }
              duration={5000}
              numberOfReps={5}
              containerStyle={[styles.containerHorizontal, styles.horizontal]}
            />

            <Marquee
              label={'Hey there, this is the new Marquee component from UILIB!'}
              direction={
                MarqueeDirections.LEFT
              }
              duration={5000}
              containerStyle={[styles.containerHorizontal, styles.horizontal]}
            />
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  containerHorizontal: {
    borderWidth: 1,
    borderColor: 'black',
    marginVertical: Spacings.s2,
  },
  containerHorizontal1: {
    borderWidth: 1,
    borderColor: 'red',
    marginVertical: Spacings.s2,
  },
  horizontal: { width: 200 },
  vertical: { width: 250, height: 100, alignItems: 'center' },
  containerVertical: {
    borderWidth: 1,
    borderColor: 'black',
    marginVertical: Spacings.s2,
  },
  label: { alignSelf: 'center' },
});
